import React from 'react';
import $ from 'jquery';
import Axios from 'axios';
import Lbchlid from './lbchild';

class Lunbo extends React.Component{
	 constructor(props) {
        super(props);
		this.state={
			res:'',
		}
	}
	componentWillMount(){
		var that =this;
		Axios({
			method:'post',
			url:'http://10.31.160.62:3000/getnewsongs',
			dataType:'json'
		}).then(function(res){
			that.setState({
				res:res.data,
			})
		})	
	}
    componentDidMount(){
        $(function(){
				var $num=0;//接收索引。
				var $piclist=4;//图片的个数
				setTimeout(function(){
					var $first=$('.playlist_box').first().clone(true);
					var $last=$('.playlist_box').last().clone(true);
					$('.playlist__list').append($first);
					$('.playlist__list').prepend($last);
					var wid=1200;
					$('.playlist__list')
					.width($('.playlist_box').length*wid)
					.css('left',-wid+'px');
				},500)
				$('.slide_switch__item').click(function(){
					//$(this).index();//当前点击的按钮的索引
					$num=$(this).index();
					tab();
				});
				
				$('.slide_action__btn--right').click(function(){
					$num++;
					tab();
					if($num>=$piclist){
						$('.slide_switch__item').eq(0).addClass('slide_switch__item--current').siblings().removeClass('slide_switch__item--current');
					}
				});
				$('.slide_action__btn--left').click(function(){
					$num--;
					$('.playlist__list').stop(true,true).animate({
						'left':-1200*($num+1),
					},600,function(){
						if(parseInt($('.playlist__list').css('left'))>=0){
							$('.playlist__list').css('left',-4800+'px');
							$num=3;
						}
						$('.slide_switch__item').eq($num).addClass('slide_switch__item--current').siblings().removeClass('slide_switch__item--current');
					})
				});

				function tab(){
					$('.slide_switch__item')
					.eq($num).addClass('slide_switch__item--current')
					.siblings('.slide_switch__item')
					.removeClass('slide_switch__item--current');
					$('.playlist__list').stop(true,true).animate({
						left:-1200*($num+1)
					},600,function(){
						if(parseInt($('.playlist__list').css('left'))<-1200*($piclist)){
							$('.playlist__list').css('left',-1200+'px');
							$num=0;
						}
					});
				}
			});
    }
    render(){
		var _res=this.state.res.msg;
		var html=[];
		var dt =[];
		if(_res){
			for(var i=1;i<=_res.length;i++){
				dt.push(_res[i]);
				if(i%4==0){
					html.push(
						<Lbchlid key={i}  {...dt}/>
					)
					dt=[];
				}
			}
		}
        return(
            <div className="mod_index mod_index--new mod_slide_box">
			<div className="section_inner">
				<div className="index__hd " id="jbmao">
					<h2 className="index__tit">
					<i className="index__tit_sprite"></i>
					<i className="icon_txt">新碟首发</i>
				</h2>
					<i className="index__line index__line--left"></i>
					<i className="index__line index__line--right"></i>
				</div>
				<a href="##" className="index__more index__more--white js_album_more">
					全部
					<i className="icon_index_arrow"></i>
				</a>
				<div className="mod_index_tab">
					<a href="##" className="index_tab__item js_tab index_tab__item--current">内地</a>
					<a href="##" className="index_tab__item js_tab">港台</a>
					<a href="##" className="index_tab__item js_tab">欧美</a>
					<a href="##" className="index_tab__item js_tab">韩国</a>
					<a href="##" className="index_tab__item js_tab">日本</a>
				</div>
				<div className="mod_playlist mod_slide">
					<ul className="playlist__list slide__list">
						{html}
						
					</ul>
				</div>
				<div className="mod_slide_switch js_switch">
					<a href="javascript:;" className="js_jump slide_switch__item slide_switch__item--current">
						<i className="slide_switch__bg"></i>
						<i className="icon_txt">1</i>
					</a>
					<a href="javascript:;" className="js_jump slide_switch__item">
						<i className="slide_switch__bg"></i>
						<i className="icon_txt">2</i>
					</a>
					<a href="javascript:;" className="js_jump slide_switch__item">
						<i className="slide_switch__bg"></i>
						<i className="icon_txt">3</i>
					</a>
					<a href="javascript:;" className="js_jump slide_switch__item">
						<i className="slide_switch__bg"></i>
						<i className="icon_txt">4</i>
					</a>
				</div>
			</div>
			<div className="mod_slide_action">
				<div className="slide_action slide_action--left">
					<a href="javascript:;" className="slide_action__btn slide_action__btn--left js_jump">
						<i className="icon_txt">上一页</i>
						<i className="slide_action__arrow slide_action__arrow--left"></i>
					</a>
				</div>
				<div className="slide_action slide_action--right">
					<a href="javascript:;" className="slide_action__btn slide_action__btn--right js_jump">
						<i className="icon_txt">上一页</i>
						<i className="slide_action__arrow slide_action__arrow--right"></i>
					</a>
				</div>
			</div>
			
		</div>
        )
    }
}

export default Lunbo;